<template>
  <div class="section">
    <!-- <h2>鱼体检测</h2> -->
    <div class="topimg">鱼体检测</div>
    <div class="image-container">
      <img
        :src="detectionData.imageUrl"
        alt="鱼体检测图片"
        v-if="detectionData.imageUrl"
      />
    </div>
    <div class="detection-boxes">
      <div class="detection-box">
        <span>最大体长: {{ detectionData.maxLength }}m</span>
      </div>
      <div class="detection-box">
        <span>最小体长: {{ detectionData.minLength }}m</span>
      </div>
    </div>
  </div>
  <div class="section section2">
    <div class="topimg">鱼体计数</div>
    <!-- <h2>鱼体计数</h2> -->
    <div class="image-container">
      <img
        :src="countData.imageUrl"
        alt="鱼体计数图片"
        v-if="countData.imageUrl"
      />
    </div>
    <div class="detection-boxes">
      <div class="detection-box">
        <span>鱼类数量: {{ countData.fishCount }}</span>
      </div>
      <div class="detection-box">
        <span>时间: {{ countData.time }}</span>
      </div>
      <div class="detection-box">
        <span>置信度: {{ countData.confidence }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { monitorApi } from "@/api";
export default {
  setup() {
    const detectionData = ref({ maxLength: "-", minLength: "-", imageUrl: "" });
    const countData = ref({
      fishCount: "-",
      time: "-",
      confidence: "-",
      imageUrl: "",
    });
    onMounted(async () => {
      // 获取鱼体检测数据
      const res1 = await monitorApi.getEnvironmentDataList({
        type: "detection",
      });

      if (res1.code === 0 && res1.data) {
        detectionData.value = {
          maxLength: res1.data.maxLength,
          minLength: res1.data.minLength,
          imageUrl: res1.data.imageUrl,
        };
      }
      // 获取鱼体计数数据
      const res2 = await monitorApi.getEnvironmentDataList({ type: "count" });

      if (res2.code === 0 && res2.data) {
        countData.value = {
          fishCount: res2.data.fishCount,
          time: res2.data.time,
          confidence: res2.data.confidence,
          imageUrl: res2.data.imageUrl,
        };
      }
    });
    return { detectionData, countData };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.section {
  margin-bottom: 40px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
h2 {
  color: #ffffff;
  font-size: 24px;
  margin-bottom: 10px;
}
.image-container {
  position: relative;
  width: 500px;
  height: 316px;
  margin: 0 auto;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.image-container img {
  width: 100%;
  height: 100%;
}
.detection-boxes {
  display: flex;
  justify-content: space-between;
  width: 500px;
  margin: 0 auto;
  margin-top: 10px;
}
.detection-box {
  width: 126px;
  height: 31.5px; /* 126 / 4 = 31.5, 宽高比4:1 */
  border: 2px solid #ffffff;
  border-radius: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detection-box span {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.section2{
  position: relative;
  bottom: 35px;
}
.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(@/assets/top.png);
  background-size: cover;
  text-align: center;
}
</style>